<template>
    <div>
         <el-tabs type="border-card">
             <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="time"
                label="时间">
                </el-table-column>

                <el-table-column
                prop="num"
                label="渠道数量">
                </el-table-column>

                <el-table-column
                prop="accout"
                label="活跃账号">
                </el-table-column>

                <el-table-column
                prop="device"
                label="活跃设备">
                </el-table-column>

                <el-table-column
                prop="man"
                label="付费人数">
                </el-table-column>

                <el-table-column
                prop="total"
                label="付费总金额">
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                    :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
         </el-tabs>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                listQuery: {
                    page: 1,
                    limit: 10
                },
                tableData: [
                    {
                        time:"10:00",
                        num:12,
                        accout:25,
                        device:23,
                        man:7,
                        total:100
                    },
                    {
                        time:"10:00",
                        num:12,
                        accout:25,
                        device:23,
                        man:7,
                        total:100
                    },
                    {
                        time:"10:00",
                        num:12,
                        accout:25,
                        device:23,
                        man:7,
                        total:100
                    }
                ]
            }
        },
        methods:{
            handleSizeChange(val) {
                this.listQuery.limit = val
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
            }
        }
    }
</script>

<style scoped>

</style>